<title>管理员设置</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb" lay-separator=">">
        <a lay-href=""><i class="layui-icon layui-icon-locate"></i>您当前的位置：</a>
        <a><cite>系统管理</cite></a>
        <a><cite>管理员设置</cite></a>
    </div>
</div>
<div class="layui-fluid custom-manageSet-page">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md2 layui-col-lg2 left-side">
            <!-- 任务树 -->
            <div class="layui-card">
                <div class="layui-card-header">
                    <img src="../../../../dist/style/res/formFill/tem-task.png" class="card-header-icon"/>
                    <span class="card-header-title">级别列表</span>
                </div>
                <div class="layui-card-body task-body">
                    <ul id="treeDemo"></ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md10 layui-col-lg10 right-side">
            <!-- 查询条件 -->
            <div class="layui-card query-box">
                <div class="layui-card-body clearfix">
                    <div class="left-card-body">
                        <div class="layui-card-header">
                            <img src="../../../../dist/style/res/formFill/tem-task.png" class="card-header-icon"/>
                            <span class="card-header-title">基本信息</span>
                        </div>
                        <form class="layui-form roles-updateHtml-form" action="" lay-filter="roles-updateHtml-form-group">
                            <div style="margin-top: 9px;margin-left: 10px;display: inline-block;">
                                <button type="button" class="layui-btn layui-btn-save layui-btn-sm btn-color T-event" data-target="save">保存</button>
                            </div>
                            <div class="layui-inline">
                                <div class="special-content">
                                    <div class="special-key">
                                        <button type="button" class="layui-btn layui-btn-xs">选择人员：</button>
                                    </div>
                                    <div class="special-value T-event" data-target="chooseUnit">
                                        <div class="check-value-box unit-department"></div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- 填报表单 -->
            <div class="layui-card form-box">
                <div class="layui-card-body">
                    <div class="layui-serach-body">
                        <div class="layui-input-box">
                            <label class="layui-form-label">姓名：</label>
                            <div class="layui-input-block">
                                <input type="text" name="roleSearch" class="layui-input">
                            </div>
                        </div>
                        <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-enquiry T-event" data-target="enquiry">查询</button>
                    </div>
                    <table class="layui-table" id="roles-table-simple" lay-filter="roles-table-operate"></table>
                    <div id="laypage"></div>
                    <script type="text/html" id="roles-table-operate-bar">
                        <a class="layui-icon layui-icon-delete my-table-btn-del T-event" lay-event="del" lay-tips="删除"></a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .custom-manageSet-page .left-side .layui-card{
        height: 835px;
        border-radius: 4px;
        padding: 0 13px 0 13px;
       /*  -ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc); */
    }
    .layui-card-header .left-button{
        margin-left: 20px;
        width: 50px;
        background-color: #2669B1;
        text-align: center;
        /* -ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc); */
    }
    .layui-btn-save, .layui-btn-enquiry{
        width: 71px;
        text-align: right;
    }
    .layui-btn-save{
        background: url('../../dist/style/res/formFill/saveForm.png') no-repeat 10px center;
        background-color: #2669B1;
    }
    .layui-btn-enquiry{
        background: url('../../dist/style/res/formFill/search.png') no-repeat 10px center;
        background-color: #77AF6F;
    }
    .custom-manageSet-page .layui-card-header{
        height: 34px;
        border-bottom: 1px solid #D2D2D2;
        font-size: 14px;
        padding: 0 0 5px 0;
        line-height: 40px;
    }
    .custom-manageSet-page .card-header-icon{
        width: 18px;
        height: 18px;
    }
    .custom-manageSet-page .card-header-title{
        line-height: 30px;
        margin-left: 8px;
    }
    .custom-manageSet-page .roles-updateHtml-form{
        display: flex;
        width: 100%;
    }
    .custom-manageSet-page .task-body{
        padding: 0;
        height: 780px;
        border-radius: 5px;
        margin-top: 10px;
        /* -ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc); */
    }
    .custom-manageSet-page #treeDemo{
        padding: 0;
        height: 100%;
        overflow: auto;
        font-size: 14px;
    }
    .custom-manageSet-page #treeDemo li {
        height: 32px;
        line-height: 32px;
        min-width: 200px;
        cursor: default;
        overflow: hidden;
        color: #373737;
        white-space:nowrap;
    } 
    #treeDemo li .per-num{
        width: 25px;
        max-width: 30px;
        font-weight: bold;
    }
    #treeDemo li .per-num, #treeDemo li .per-contnt{
        display: inline-block;
        height: 32px;
        line-height: 32px;
        overflow: hidden;
    }
    .custom-manageSet-page #treeDemo .layui-icon{
        font-size: 16px;
        float: right;
    }
    .custom-manageSet-page #treeDemo li:hover, .custom-manageSet-page #treeDemo li.treeDemoLiActive{
        background-color: #DCE7F4;
    }
    .custom-manageSet-page .query-box{
        height: 158px;
        margin-bottom: 0px;
        border-bottom: 1px solid #D2D2D2;
    }

    .custom-manageSet-page .form-box{
        height: 676px;
        border-radius: 4px;
    }
    .custom-manageSet-page .select-form-header{
        position: relative;
    }
    .custom-manageSet-page .card-header-right{
        position: absolute;
        right: 0;
        top: 0;
    }
    .custom-manageSet-page .layui-card .layui-tab{
        margin-top: 13px;
        z-index: 9999;
    }
    .custom-manageSet-page .layui-tab-card .layui-tab-title{
        background: #fff;
    }
    .custom-manageSet-page .layui-tab-card{
        border-top: none;
    }
    .custom-manageSet-page .select-form-box{
        padding: 10px 10px 0 15px;
        height: 528px;
    }
    .custom-manageSet-page .layui-this{
        border-top: 2px solid #008AE1;
    }
    .custom-manageSet-page .btn-export, .btn-import, .btn-saveform{
        width: 96px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #2669B1;
        border-radius: 4px;
        font-weight:600;
        font-size: 14px;
        padding-left: 31px;
        color: #FFFFFF;
        cursor: pointer;
    }
    .custom-manageSet-page .btn-saveform{
        background: url(../../../../dist/style/res/formFill/saveForm.png) no-repeat #2669B1;
        background-position: 7px 5px;
       /*  -ms-behavior: url(../../dist/style/res/backgroundsize.min.htc);
        behavior: url(../../dist/style/res/backgroundsize.min.htc); */
    }
    .custom-manageSet-page .custom-manageSet-page .layui-tab-content{
        padding: 15px 9px 32px 9px;
    }
    .custom-manageSet-page .layui-table tbody tr.bgRed{
        background: red;
    }
    .custom-manageSet-page #test-table-cellEdit1{
        width: 100%;
        text-align: center;
    }
    .custom-manageSet-page .addLine, .delLine{
        width: 24px;
        height: 22px;
        border: none;
        background-position: center center;
        background-repeat: no-repeat;
        margin-top: 4px;
        cursor: pointer;
    }
    .custom-manageSet-page .addLine{
        background: url(../../../../dist/style/res/formFill/add.png);
        margin-right: 40px;
        /* -ms-behavior: url(../../dist/style/res/backgroundsize.min.htc);
        behavior: url(../../dist/style/res/backgroundsize.min.htc); */
    }
    .custom-manageSet-page .delLine{
        background: url(../../../../dist/style/res/formFill/del.png);
        /* -ms-behavior: url(../../dist/style/res/backgroundsize.min.htc);
        behavior: url(../../dist/style/res/backgroundsize.min.htc); */
    }
    .custom-manageSet-page .layui-table td, .layui-table th{
        text-align: center;
    }
    .custom-manageSet-page .query-box .layui-card-body{
        padding: 0;
    }
    .custom-manageSet-page .left-card-body{
        box-sizing: border-box;
        float: left;
        width: 100%;
        height: 157px;
        padding: 0 8px;
    }
    .custom-manageSet-page .left-card-body .layui-form-label{
        box-sizing: border-box;
        width: inherit;
        padding: 10px 15px 9px 0;
        font-size: 16px;
        line-height: inherit;
        color: #373737;
    }
    .custom-manageSet-page .left-card-body .layui-inline{
        width: 600px;
        margin-top: 20px;
    }
    .layui-inline .special-content{
        margin: 27px;
    }
    .custom-manageSet-page .special-key {
        vertical-align: top;
        display: inline-block;
    }
    .layui-inline .special-content button{
        background: #fff;
        color: #2669B1;
        font-size: 16px;
        line-height: 35px;
        height: 35px;
    }
    .custom-manageSet-page .left-card-body .layui-input{
        height: 43px;
        line-height: 43px;
        border: 1px solid #E4E4E4;
        border-radius: 6px;
        background: #F0F5F7;
    }
    .custom-manageSet-page .right-card-body{
        position: relative;
        float: right;
        width: 15.7%;
        height: 146px;
    }
    .custom-manageSet-page .query-btn{
        position: absolute;
        top: 55px;
        right: 47px;
        height: 50px;
        padding: 0 53px 0 55px;
        background-color: #2E75D4;
        font-size: 18px;
        border-radius:6px;
        border: 1px solid #2E75D4;
    }
    .custom-manageSet-page .query-btn:hover{
        background: linear-gradient(to right, #0390FF, #5EE0F3);
    }
    .custom-manageSet-page .special-value {
        overflow: hidden;
        border: 1px solid #ccc;
        height: 38px;
        width: 400px;
        border-radius: 6px;
        border: 1px solid #C5C5C5;
        display: inline-block;
    }
    .custom-manageSet-page .check-value-box {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 2px 2px;
        display: flex;
        white-space: nowrap;
    }
    .custom-manageSet-page .check-value-box div{
        display: flex;
    }
    .custom-manageSet-page .check-value-box div p{
        text-align: center;
        width: 100%;
    }
    .layui-layer .layui-layer-title {
        height: 35px;
        line-height: 35px;
        padding: 0;
        border-bottom: none;
        background: url(/src/style/res/formFill/layer-head.png) no-repeat center center;
    }
    .formFill-icon {
        display: inline-block;
        width: 3px;
        height: 14px;
        background-color: #FFFFFF;
        vertical-align: middle;
        margin: 0 12px 0 24px;
    }
    .custom-manageSet-page .unit{
        display: none;
    }
    .custom-manageSet-page .layui-icon-closeDiv{
        position: fixed;
        margin-top: -36px;
        margin-left: 208px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        background: url(../../../../dist/style/res/system/del.png) no-repeat center center;
    }
    /* 滚动条样式 */
    ::-webkit-scrollbar{
        width: 4px;
        height: 4px;
    }
    ::-webkit-scrollbar-thumb{
        border-radius: 5px;
        -webkit-box-shaow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0,0,0,0.2);
    }
    ::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }
    .my-table-btn-del{
        font-size: 20px;
        border: 1px solid;
        border-radius: 4px ;
        color: #FF4E32;
        border-color: #FF4E32;
    }
    .my-table-btn-del:hover{
		color: #0BAFFD;
		border-color: #0BAFFD;
	}

    #laypage{
        height: 33px;
        line-height: 33px;
        border: 1px solid #E6E6E6;
        border-top: none;
        font-size: 12px;
        padding: 5px 7px 0;
        white-space: nowrap;
    }
    #laypage .layui-laypage{
        position: relative;
        margin: 0;
    }
    .layui-input-box{
        display: inline-block;
    }
    .layui-serach-body .layui-input-block{
        width: 250px;
    }
    .layui-serach-body .layui-input{
        border: 1px solid #C5C5C5;
        border-radius: 6px;
    }
    #laypage .layui-laypage a, #laypage .layui-laypage .layui-laypage-spr{
        border: none;
    }
    .layui-table-view .no-data-tips{
        margin-top: 50px;
    }
</style>
<script type="text/html" id="permanentselectuserTpl">
    {{#
        layui.each(d, function(index,item) {
    }}
        <div class="unit-content">
            <p data-certCode="{{item.cert_code}}" data-userId="{{item.user_code}}" data-deptName="{{item.dept_name}}" data-deptCode="{{item.dept_code}}">{{item.userName}}、</p>
        </div>
    {{#
        })
    }}
</script>
<script type="text/html" id="permanentselectunitTpl">
    {{#
        layui.each(d, function(index,item) {
    }}
        <div class="unit-content">
            <p data-certCode="{{item.cert_code}}" data-userId="{{item.user_code}}" data-userName="{{item.userName}}" data-deptCode="{{item.dept_code}}">{{item.dept_name}}、</p>
        </div>
    {{#
        })
    }}
</script>
<script>
    layui.use(['admin','table','laypage', 'laytpl','layer','element','tools','form'], function(){
        var $ = layui.$,
        admin = layui.admin,
        laytpl = layui.laytpl,
        view = layui.view,
        element = layui.element,
        layer = layui.layer,
        laypage = layui.laypage,
        tools = layui.tools,
        filenames = [],
        table = layui.table,
        form = layui.form,
        liId = null,
        selectDep = [],
        originDep = [],
        layout = ['.layui-table th', '.layui-table td', '#treeDemo'];
                
        form.render(null, 'temporary-updateHtml-form-group');
        
        window.currpage = 1;
        window.limitNum = 10;

        $.each(selectDep, function(i,e) {
            e.dept_id = e.dataid;
            originDep.push(e);
        });

        form.render(null, 'roles-updateHtml-form-group');

        initRole(); //初始化角色

        //按钮点击事件
        $('.custom-manageSet-page').on('click', '.T-event', function() {
            var target = $(this).data('target');
            if (target === 'chooseUnit') {
                var selectPerson = $('.unit-department span'),
					selectIds = [],
                    reviewUrl = './task/temporary/addPerson';
                    
					if(selectPerson){
						layui.each(selectPerson, function(index, item){
							selectIds.push({ 
								dept_name: item.getAttribute('deptname'),
								userName: item.innerText,
								user_code: item.getAttribute('usercode'), 
								phone: item.getAttribute('phone'),
								email: item.getAttribute('email'),
								cert_code: item.getAttribute('certcode')
							});
						})
					}
					layer.open({
						id: 'temporary-reviewHtml',
						title: '<i class="formFill-icon"></i><span style="color:#FFF;">选择人员</span>',
						type: 1,
						offset: '20px',
						shadeClose: true,
						area: ['570px', '650px'],
						success: function(lay, index){
							view(this.id).render(reviewUrl, {
								checkIds: selectIds || []
							}).done(function() {
								$(lay).on('click', '.T-confirm', function() {
									var selectReview = $(lay).find('.check-value-box .unit-content'),
										$eachman = '';
									$.each(selectReview, function(index, item){
										var usercode = item.querySelector('.del-tag').getAttribute('data-usercode'),
											certcode = item.querySelector('.del-tag').getAttribute('data-certcode'),
											deptname = item.querySelector('.del-tag').getAttribute('data-deptnme'),
											phone = item.querySelector('.del-tag').getAttribute('data-phone'),
											email = item.querySelector('.del-tag').getAttribute('data-email'),
											username = item.querySelector('a').innerText;
									    $eachman += '<span usercode="'+usercode+'" certcode="'+certcode+'" deptname="'+deptname+'" phone="'+phone+'" email="'+email+'">'+username+'</span>、';
									})
									$('.check-value-box').html($eachman);
									layer.close(index);
								});
							});
						}
					})
            }else if(target === "add"){
                layer.open({
                    id: 'roles-add-pastHtml',
                    title: '<i class="formFill-icon"></i><span style="color:#FFF;">新增角色</span>',
                    offset: '200px',
                    type: 1,
                    shadeClose: true,
                    area: ['270px', '120px'],
                    success: function(lay, index) {
                        view(this.id).render("./system/add", {
                            exitDep: selectDep,
                        }).done(function() {
                            $(lay).on('click', '.T-confirm', function() {
                                var name = $(lay).find('input').val();
                                admin.req({
                                    type:"post",
                                    url: 'myapi/DC/api/rest/web/custom/Role',
                                    data:{
                                        model:"insert",
                                        rolename:name
                                    },
                                    success: function (res) {
                                        if(res.data.length==undefined){
                                            var data = res.data.data;
                                        }else{
                                            var data = res.data;
                                        }
                                        $("#treeDemo").append("<li id='"+data.id+"'>"+data.rolename+"</li>");
                                    }
                                });
                                layer.close(index);
                            });
                        });
                    }
                });
            }else if(target === "del"){
                var id = $(this).prev().attr("id");
                admin.req({
                    type:"post",
                    url: 'myapi/DC/api/rest/web/custom/Role',
                    data:{
                        model:"del",
                        id:id
                    },
                    success: function (res) {
                        var $lis = $("#treeDemo li");
                        $.each($lis,function(index,ele){
                            if($(ele).attr("id")==id){
                                $(ele).remove();
                            }
                        })
                    }
                });
            }else if(target === "save"){
                var paramArr = [],
                    selectArray = $('.unit-department span');
                layui.each(selectArray, function(index, item){
                    paramArr.push({
                        name: item.innerText,
                        user_code: item.getAttribute('usercode'),
                        cert_code: item.getAttribute('certcode'),
                        agrid_id: liId
                    })
                });
                if(paramArr && paramArr.length > 0){
                    admin.req({
                        type:"post",
                        url: 'myapi/DC/api/rest/web/custom/AdminLevelMain',
                        data:{model:"add",users:JSON.stringify(paramArr)},
                        done: function (res) {
                            getRole(liId, 1, 10);
                            $('.check-value-box').empty();
                            layer.msg('保存成功', {time: 1000});
                        }
                    });
                }else{
                    layer.msg('请选择相应人员', {time: 1000})
                }
            }else if(target == 'enquiry'){
                var searchName = $.trim($('.layui-serach-body .layui-input').val());
                getRole(liId, 1, 10, searchName);
            }
        })

        //点击左侧树
        $('.custom-manageSet-page #treeDemo').on('click', 'li', function() {
            $(this).addClass("treeDemoLiActive").siblings("li").removeClass("treeDemoLiActive");
            liId = $(this).attr("id");
            getRole(liId, 1, 10);
        })

        //获得角色人员
        function getRole(roleId, page, count, searchName){
            var paramArr = {
                model: "selectUsers",
                agrid_id: roleId,
                page: page, 
                count: count
            };
            if(searchName){ paramArr.userName = searchName; }
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/AdminLevelMain',
                data: paramArr,
                done: function(res){
                    var data = res.data.data;
                    if(res.retcode == '0' && data){
                        table.render({
                            elem: '#roles-table-simple',
                            height: 538,
                            text: {
                                none: '<div class="no-data-tips"><img src="/src/style/res/about/empty.png"><p style="color:#DBDBDB;">暂无数据</p></div>'
                            },
                            limit: window.limitNum, 
                            cellMinWidth: 80 
                            ,cols: [[
                                { type: 'numbers', title: '序号', width: 44 },
                                { field:'name', title: '姓名' },
                                { field:'dept_name', title: '所在单位' },
                                { title: '操作', align: 'center', toolbar: '#roles-table-operate-bar' }
                            ]],
                            skin: 'nob',
                            even: true,
                            data: data,
                            done: function(response, curr, count){
                                response.data && response.data.length > 0 ? reloadLaypage(res.data.totalNumber, window.currpage, window.limitNum) :  $('#laypage').empty(); 
                                tools.setFont(layout);
                            }
                        })
                    }
                }
            })
        }
        //加载分页
        function reloadLaypage(totalNumber, pageNum, listNum){
            laypage.render({
                elem: 'laypage',
                count: totalNumber, //数据总数
                limit: listNum, //每页的条数
                curr: pageNum, //起始页
                limit: 10,
                next:'<i class="layui-icon">&#xe602;</i>',
                prev:'<i class="layui-icon">&#xe603;</i>',
                first: '<i class="layui-icon">&#xe65a;</i>',
                last: '<i class="layui-icon">&#xe65b;</i>',
                layout: ['refresh', 'first', 'prev', 'skip', 'count', 'allPage', 'next', 'last'],
                extend:{
                    first: true, //是否显示首页
                    spr: false,//是否显示页码分页符号 默认显示
                    pagecount: true//页码是否显示总数  groups=1时才有效
                },
                jump: function(obj, first){
                    if(!first){ //首次不执行
                        getRole(liId, obj.curr, obj.limit);
                        window.currpage = obj.curr; //当前页数
                        window.limitNum = obj.limit; //当前页展示条数
                    }
                }
            })
        }

        //监听工具条
		table.on('tool(roles-table-operate)', function (obj) {
			var data = obj.data;
			switch(obj.event) {
				case 'del':
                    layer.confirm('确认删除当前人员吗？', function (index) {
                        var delUsers = [{id: data.id}];
                        admin.req({
                            url: 'myapi/DC/api/rest/web/custom/AdminLevelMain',
                            data: {
                                model: "del",
                                ids: JSON.stringify(delUsers)
                            },
                            success: function(res){
                                layer.msg('删除成功', {time: 1000});
                                getRole(liId, 1, 10);
                                layer.close(index);
                            }
                        });
                });
				break;
				default:
				break;
			}
		});

        //初始化角色
        function initRole(){
            admin.req({
                type:"post",
                url: 'myapi/DC/api/rest/web/custom/AdminLevelMain',
                data: {
                    model: 'selectList'
                },
                success: function (res) {
                    var data = res.data.data;
                    if(res.retcode == '0' && data && data.length > 0){
                        var $li="";
                        for(var i=0;i<data.length;i++){
                            if(i===0){
                                $li += "<li class='treeDemoLiActive' id='"+data[i].id+"' grid='"+data[i].grid+"'><span class='per-num'>"+(i+1)+"</span><span class='per-contnt'>"+data[i].text+"</span></li>"
                            }else{
                                $li += "<li id='"+data[i].id+"' grid='"+data[i].grid+"'><span class='per-num'>"+(i+1)+"</span><span class='per-contnt'>"+data[i].text+"</span></li>"
                            }
                        }
                        $("#treeDemo").empty().append($li);
                        liId = data[0].id;
                        getRole(liId, 1, 10);
                    }
                }
            });
        }

        //查询绑定enter键
        $(document).keydown(function(event){
            if(event.keyCode == 13){
                $('.layui-btn-enquiry').click();
            }
        })
    })
</script>